<template>
  <div class="app-container">
    <!-- <Editor msg="Welcome to Your Vue.js App" /> -->
    <editor ref="editor" :items="items" :undoRecordsNum="100"/>
    <!-- button @click="setPages">set pages</button -->
  </div>
</template>

<script>

// @ is an alias to /src
import editor from "@/components/editor.vue";
import {items} from "@/components/items"
export default {
  name: "Home",
  components: {editor},
  data(){
    return {
      items:items,
      data:[{"title":"页面名称","size":{"width":1024,"height":768},"gridVisible":true,"isMain":true,"backgroundColor":"#FFFFFF","items":[{"type":"pilotLamp","width":40,"height":40,"state":0,"stateIcon":["/static/poilotLamp/state_0.svg","/static/poilotLamp/state_1.svg"],"x":97,"y":78,"lock":false,"idx":0,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false},{"type":"switchItem","width":100,"height":40,"state":0,"stateIcon":["/static/switchItem/s0.svg","/static/switchItem/s1.svg"],"lock":false,"x":255,"y":137,"idx":1,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false},{"type":"flowLineItem","width":0,"height":10,"state":0,"x1":234,"y1":286,"color":"rgb(86, 136, 222)","borderColor":"#000000","x":184,"y":286,"lock":false,"idx":2,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false}],"resizeIdx":-1,"resizeType":"","dragIdx":-1,"svgPickerVisible":false,"mouseDownEvent":null,"mouseDownXY":{"x":0,"y":0},"mouseUpRightEvent":null,"cxtMenuVisible":false},{"title":"新建页面1","size":{"width":1024,"height":768},"gridVisible":true,"isMain":false,"backgroundColor":"#FFFFFF","items":[{"type":"switchItem","width":100,"height":40,"state":0,"stateIcon":["/static/switchItem/s0.svg","/static/switchItem/s1.svg"],"lock":false,"x":176,"y":96,"idx":0,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false},{"type":"flowLineItem","width":0,"height":10,"state":0,"x1":240,"y1":244,"color":"rgb(86, 136, 222)","borderColor":"#000000","x":190,"y":244,"lock":false,"idx":1,"pageSize":{"width":1024,"height":768},"selected":true,"checked":true}],"resizeIdx":-1,"resizeType":"","dragIdx":-1,"svgPickerVisible":false,"mouseDownEvent":null,"mouseDownXY":{"x":0,"y":0},"mouseUpRightEvent":null,"cxtMenuVisible":false}]
    }
  },
  methods:{
    setPages:function(){
      var pages=[{"title":"页面名称","size":{"width":1024,"height":768},"gridVisible":true,"isMain":true,"backgroundColor":"#FFFFFF","items":[{"type":"pilotLamp","width":40,"height":40,"state":0,"stateIcon":["/static/poilotLamp/state_0.svg","/static/poilotLamp/state_1.svg"],"x":97,"y":78,"lock":false,"idx":0,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false},{"type":"switchItem","width":100,"height":40,"state":0,"stateIcon":["/static/switchItem/s0.svg","/static/switchItem/s1.svg"],"lock":false,"x":255,"y":137,"idx":1,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false},{"type":"flowLineItem","width":0,"height":10,"state":0,"x1":234,"y1":286,"color":"rgb(86, 136, 222)","borderColor":"#000000","x":184,"y":286,"lock":false,"idx":2,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false}],"resizeIdx":-1,"resizeType":"","dragIdx":-1,"svgPickerVisible":false,"mouseDownEvent":null,"mouseDownXY":{"x":0,"y":0},"mouseUpRightEvent":null,"cxtMenuVisible":false},{"title":"新建页面1","size":{"width":1024,"height":768},"gridVisible":true,"isMain":false,"backgroundColor":"#FFFFFF","items":[{"type":"switchItem","width":100,"height":40,"state":0,"stateIcon":["/static/switchItem/s0.svg","/static/switchItem/s1.svg"],"lock":false,"x":176,"y":96,"idx":0,"pageSize":{"width":1024,"height":768},"selected":false,"checked":false},{"type":"flowLineItem","width":0,"height":10,"state":0,"x1":240,"y1":244,"color":"rgb(86, 136, 222)","borderColor":"#000000","x":190,"y":244,"lock":false,"idx":1,"pageSize":{"width":1024,"height":768},"selected":true,"checked":true}],"resizeIdx":-1,"resizeType":"","dragIdx":-1,"svgPickerVisible":false,"mouseDownEvent":null,"mouseDownXY":{"x":0,"y":0},"mouseUpRightEvent":null,"cxtMenuVisible":false}];
      this.$refs.editor.setData(pages);
    }
  }
};
</script>
<style>
.app-container{
  width: 100%;
  height: 100%;
}
</style>